<template>
  <div v-if="realLoginMode === 'local'" class="login-content" style="background-image: url(./img/bg.svg)">
    <ep-notice-bar
      v-if="settings.productionLoginMode === 'none'"
      left-icon="ion-volume-high"
      text="请注意当前设置为：!!!!!!!!【生产模式无登录页】!!!!!!!!，可前往 settins.js设置"
      style="position: absolute; top: 0; left: 0; width: 100%; font-size: 20px; color: red"
    >
      <a
        slot="cont"
        href="http://192.168.0.40/confluence/pages/viewpage.action?pageId=61576962#ep-front%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%E6%96%87%E6%A1%A3-%E5%85%B3%E4%BA%8E%E7%99%BB%E5%BD%95"
        target="_blank"
        >查看文档</a
      >
    </ep-notice-bar>
    <div class="container">
      <div class="container-left">
        <!-- <img :src="'./img/22.jpg'" alt=""> -->
      </div>
      <div class="container-right">
        <div class="login-box">
          <div class="top">
            <img class="logo-img" src="~@/assets/logo.png" alt="" />
            <span class="logo-title">EP-HUNTER</span>
          </div>
          <div class="main">
            <ep-form v-if="!showRegister" ref="loginForm" :form="loginForm" :rules="rulesLogin" name-width="0">
              <ep-form-item attr="username">
                <ep-input v-model="loginForm.username" placeholder="账号" size="large">
                  <ep-icon slot="prepend" icon="person" tabindex="-1" style="color: #1890ff" />
                </ep-input>
              </ep-form-item>
              <ep-form-item attr="password">
                <ep-input v-model="loginForm.password" type="password" placeholder="密码" size="large" @keyup.native.enter="handleSubmit">
                  <ep-icon slot="prepend" icon="locked" tabindex="-1" style="color: #1890ff" />
                </ep-input>
              </ep-form-item>
              <!--              <ep-form-item attr="captchaVal">-->
              <!--                <ep-row>-->
              <!--                  <ep-col :col="12">-->
              <!--                    <ep-input-->
              <!--                      style="width: 90%"-->
              <!--                      size="large"-->
              <!--                      v-model="loginForm.captchaVal"-->
              <!--                      placeholder="验证码"-->
              <!--                      :maxlength="4"-->
              <!--                      @keyup.native.enter="handleSubmit"-->
              <!--                    >-->
              <!--                      <ep-icon slot="prepend" icon="settings" tabindex="-1" style="color: #1890ff" />-->
              <!--                    </ep-input>-->
              <!--                  </ep-col>-->
              <!--                  <ep-col :col="12">-->
              <!--                    <img-->
              <!--                      align="yzm"-->
              <!--                      class="login-yzm"-->
              <!--                      style="height: 40px"-->
              <!--                      v-if="loginForm.captchaUuid"-->
              <!--                      @click="loadCaptcha"-->
              <!--                      :src="host + '/v1/captcha/pcrimg/' + loginForm.captchaUuid"-->
              <!--                    />-->
              <!--                  </ep-col>-->
              <!--                </ep-row>-->
              <!--              </ep-form-item>-->

              <ep-form-item>
                <ep-button size="large" type="primary" class="form-button" :loading="loading" @click="handleSubmit"> 登录 </ep-button>
<!--                <ep-button size="large" type="text" class="form-button" :loading="loading" style="margin-left: 0" @click="pwdEncryptFlag = true">-->
<!--                  密码加密-->
<!--                </ep-button>-->
                <!--                <ep-button size="large" type="primary" class="form-button" :loading="loading" @click="handleRegister"> 注册 </ep-button>-->
              </ep-form-item>
            </ep-form>
          </div>
          <div class="footer"></div>
        </div>
      </div>
    </div>

    <ep-modal v-model="pwdEncryptFlag" title="密码加密工具" width="30%" top="250px">
      <ep-form>
        <ep-form-item label="请输入密码:" name-width="100px">
          <ep-input v-model="pwdEncryptRaw" placeholder="请输入密码"  type="password">
            <template slot="append">
              <ep-button type="primary" @click="doPwdEncrypt">加密</ep-button>
            </template>
          </ep-input>
        </ep-form-item>
        <ep-form-item label="密码加密结果:" name-width="100px">
          <ep-input v-model="pwdEncryptResult" placeholder="加密结果" readonly>
            <template slot="append">
              <ep-button type="primary" @click="pwdEncrypt">复制</ep-button>
            </template>
          </ep-input>
        </ep-form-item>
      </ep-form>
    </ep-modal>
  </div>
</template>

<script>
import { cloneObj } from "@/utils/data";
import { get } from "@/utils/request";
import settings from "../../settings";
import { epEnv } from "@/common/vars";
import { encrypt } from "@/utils/auth";
// import cookie from '@/utils/cookie'

let realLoginMode = ''
if (epEnv.env === 'prod') {
  realLoginMode = settings.productionLoginMode || settings.loginMode
} else {
  realLoginMode = settings.loginMode
}
console.log(epEnv.env)
export default {
  name: 'login',
  created() {
    if (realLoginMode === 'remote') {
      let url = epEnv.userCenter.replace('{appKey}', epEnv.appKey)
      url = url.replace('{appCode}', epEnv.appCode)
      global.open(url, '_self')
    } else if (realLoginMode === 'none') {
      this.$router.replace('/401')
    }
  },
  mounted() {
    // this.loadCaptcha()
  },
  data() {
    return {
      settings,
      pwdEncryptFlag: false,
      pwdEncryptRaw: '',
      pwdEncryptResult: '',
      realLoginMode: realLoginMode,
      loading: false,
      showRegister: false,
      host: global.HOST,
      loginForm: {
        username: 'epfront',
        password: 'easipass',
        captchaVal: '',
        captchaUuid: ''
      },
      registerCheck: false // true-重复了，false-没重复
    }
  },
  computed: {
    rulesLogin() {
      return {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, required: true, message: '用户名必须为3-20个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, required: true, message: '密码必须为6-20个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 登录 - 提交
    handleSubmit(e) {
      e.preventDefault()
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          let form = cloneObj(this.loginForm)
          form.userLoginId = form.username
          this.$store
            .dispatch('app/login', cloneObj(form))
            .then(res => {
              this.loading = false
              this.$success('登录成功')
              // let cookieRedirect = cookie.getCookie('ep-front-redirect')
              // if (cookieRedirect) {
              //   this.$router.push(cookieRedirect)
              //   cookie.delCookie('ep-front-redirect')
              // } else {
              //   this.$router.push('/')
              // }
              if (this.$route.query.redirect) {
                this.$router.push(this.$route.query.redirect)
              } else {
                this.$router.push('/')
              }
            })
            .catch(err => {
              // this.loadCaptcha()
              this.loading = false
            })
        } else {
          return false
        }
      })
    },
    handleRegister(e) {
      e.preventDefault()
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          let form = cloneObj(this.loginForm)
          form.userLoginId = form.username
          this.$store
            .dispatch('app/register', cloneObj(form))
            .then(res => {
              console.log(res)
              this.loading = false
              this.$success('注册成功')

              // if (this.$route.query.redirect) {
              //   this.$router.push(this.$route.query.redirect)
              // } else {
              //   this.$router.push('/')
              // }
            })
            .catch(err => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    },
    loadCaptcha() {
      get({
        url: '/v1/captcha/pcruuid'
      })
        .then(json => {
          this.loginForm.captchaUuid = json.data.captchaUuid
        })
        .catch(e => {})
    },
    // 忘记密码
    handleForget() {
      alert('TODO')
    },
    doPwdEncrypt() {
      if (this.pwdEncryptRaw) {
        this.pwdEncryptResult = encrypt(this.pwdEncryptRaw, EPENV.encrypted)
      }
    },
    pwdEncrypt() {
      this.doCopy(this.pwdEncryptRaw)
      this.$info('复制成功')
    },
    doCopy(input) {
      const save = function (e) {
        e.clipboardData.setData('text/plain', input)
        e.preventDefault() // 阻止默认行为
      }
      document.addEventListener('copy', save) // 添加一个copy事件
      document.execCommand('copy') // 执行copy方法
      document.removeEventListener('copy', save) // 清除
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/styles/vars';

.login-content {
  height: 100%;
  // background-color: #48a7fb;
  .container {
    height: 100%;
    &-left {
      height: 100%;
      width: 60%;
      float: left;
      img {
        width: 750px;
      }
    }
    &-right {
      // padding: 15% 0 144px;
      width: 40%;
      height: 100%;
      float: right;
      position: relative;
      .login-box {
        position: absolute;
        width: 400px;
        height: 400px;
        top: 50%;
        left: 50%;
        margin-left: -200px;
        margin-top: -200px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 10%);
        padding-top: 25px;
        background: #fff;
        border-radius: 3px;
        border-top: 4px solid @color-main;
        .top {
          height: 44px;
          line-height: 44px;
          text-align: center;
          margin-bottom: 30px;
          .logo-img {
            height: 44px;
            vertical-align: top;
            margin-right: 16px;
          }
          .logo-title {
            position: relative;
            top: 2px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 600;
            font-size: 33px;
          }
        }
        .main {
          width: 80%;
          max-width: 400px;
          margin: 0 auto;
          .form-button {
            width: 100%;
            margin-top: 20px;
          }
        }
        .footer {
        }
      }
    }
  }
}
</style>
